<template>
<view>
<form @submit="formSubmit">
<view class="common-item">
  <view class="common-item-ul">
    <view class="common-item-li box">
        <text class="f_l must-star">*订单号</text>
        <input type="text" name="out_trade_no" placeholder="请输入订单号(为空自动时间戳)" class="flex1" placeholder-style="color:#999;"></input>
    </view>
    <view class="common-item-li box">
        <text class="f_l must-star">*订单总金额</text>
        <input type="number" name="total_fee" value="1" placeholder="请输入订单总金额，单位为分" class="flex1" placeholder-style="color:#999;"></input>
    </view>
    <view class="common-item-li box">
        <text class="f_l must-star">*回调地址</text>
        <input type="text" name="notify_url" value="http://zhifu.thinkp2p.cn/home/pay/notify/method/notify/apitype/Tonglian" placeholder="支付异步通知回调地址" class="flex1" placeholder-style="color:#999;"></input>
    </view>
    <view class="common-item-li box">
        <text class="f_l">商品描述</text>
        <input type="text" name="body" placeholder="商品描述(非必填)" class="flex1" placeholder-style="color:#999;"></input>
    </view>
  </view>
</view>

<view class="h40"></view>
<view class="footer-btn">         
  <button form-type="submit">立即支付</button>
</view>
</form>
</view>
</template>
<script>
	var app = getApp();
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
            formSubmit: function (event) {
                  var value = event.detail.value;console.log(value);
                  var param = value;
                  if (param.out_trade_no == '') {
                    //uni.showToast({title: '请输入商户订单号',duration: 2000});
					var timestamp = Date.parse(new Date());
					param.out_trade_no = timestamp;
                  }
                  if (param.total_fee == '') {
                    uni.showToast({title: '请输入订单总金额',duration: 2000});
                    return;
                  }
                  if (param.notify_url == '') {
                    uni.showToast({title: '请输入回调地址',duration: 2000});
                    return;
                  }
                  var path = 'pages/buycart/buy_order/buy_order?out_trade_no='+encodeURIComponent(param.out_trade_no)+'&total_fee='+parseInt(param.total_fee)+'&notify_url='+encodeURIComponent(param.notify_url);
                  if(param.body)path+='&body='+encodeURIComponent(param.body);
                  console.log(path);
                  app.HCnavigateToMiniProgram('gh_af4a22cb5456',path);
            }
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
    
 /*横向的项*/
.color-999{ color:#999;}
.common-item .must-star{ color:#ff0000;}
.common-item .common-item-ul{ margin-bottom:10px; background:#fff;}
.common-item .common-item-ul .common-item-li{ font-size:30rpx; border-bottom:1px solid #f0f0f0; line-height:20px; color:#666; padding:12px 8px; position:relative;}
.common-item .common-item-ul .common-item-li>text{display: inline-block;width: 180rpx;height: 42rpx;color: #333;}
.common-item .common-item-ul .common-item-li .common-item-img image{ border-radius: 100%; display: block; width: 56px; height: 56px;}
.common-item .common-item-ul .common-item-li .common-item-imgtext{ line-height: 56px;}
.common-item .common-item-ul .common-item-li input{ padding: 0px; margin: 0px;}
.common-item .common-item-ul .common-item-li input[type="text"]{ border:none;}
.common-item .common-item-ul .common-item-li input[type="password"]{ border:none;}
.common-item .common-item-ul .common-item-li:after{content: ' ';display: block;clear: both;visibility:hidden;line-height: 0;height:0;}
.common-item .common-item-ul .common-item-li:last-child{ border-bottom:none;}
.common-item .common-item-ul .common-item-li i.f_r{ font-size:14px; color:#D6D6D6;}
.common-item .common-item-ul .common-item-li .common-item-img img{ height:44px; width:44px;}
.common-item .common-item-ul .common-item-li .common-item-img + span{ line-height:44px;}
.common-item .common-item-ul .common-item-li input{ text-align:left; color:#333; line-height:20px;width: 60%;}
.common-item .common-item-ul .common-item-li .common-item-icon{ font-size:14px; padding-right:6px;}
.common-item .common-item-ul .common-item-li .picker{float:right;line-height:20px;border:none; font-size: 12px; color:#999; margin-top:-3px; padding: 0px; width: 50%; text-align: right}
.footer-btn { position: fixed; width: 100%; bottom: 0px; background: #ffffff; height: 55px;}
.footer-btn button { font-size:36rpx;color: #6991d5;    border: solid 1px #5b77bf; display: block; width: 96%; margin: 5px auto; height: 45px; line-height: 45px; text-align: center; border-radius: 45px;}

</style>
